<template>
    <div>
        <div class="links">
            <div class="line"></div>
            <div v-for="(l,i) of lineData" :key="i" class="link-item">
                <div v-show="i!=0" :class="{'close':l.type==-1,'pass':l.type==2}" class="link-line"></div>
                <div :class="[l.type==1?'being':l.type==2?'pass':l.type==-1?'close':'']" class="link-name">{{l.name}}</div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        props: {
            // el:[{name:"环节名称",type:"环节状态"}] 
            // type: 0 未到达，1 进行中，2 已通过，-1 关闭
            lineData: {
                type: Array,
                required: true
            },            
        },
        data() {
            return {

            };
        },
        methods: {

        },
    };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .links{
        display: flex;
        padding: 20px;
        margin: 20px 0;
        border: 1px solid #dcdfe6;
        background: #fff;
        .line{
            border-left: 3px solid #409eff;
            height: 20px;
            margin-right: 10px;
        }
        .link-item{
            display: flex;
            align-items: center;
        }
        .link-name,.link-line{
            margin-right: 10px;
            font-size: 18px;
            color: #999;
        }
        .link-line{
            width: 50px;
            border-top: 1px solid #999;
        }
        .link-name.being{
            color: #000;
            font-weight: bold;
        }
        .link-name.pass{
            color: #409eff;
            font-weight: bold;
        }
        .link-line.pass{
            border-top-color: #409eff;
        }
        .link-name.close,.link-line.close{
            color: #f56c6c;
            font-weight: bold;
        }
    }
</style>
